<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <div class="hello">
        Hello World!
        <span id="span">Hello Span!</span>
    </div>
    <div class="app"></div>
    <div class="data">
        <ul id="list">
            <li></li>
            <li></li>
        </ul>
    </div>

    <p class="p1"></p>
    <p class="p2"></p>

    <input type="button" onclick="removeData()" value="删除Data" />

    <div id="svg"></div>
    <script>
        const initSel = () => {
            console.log(1, d3.select("div span").text());
            console.log(2, d3.select(".hello span").text());
            console.log(3, d3.select("#span").text());
            d3.select(".app").append('span').text("我是新增的SPAN");
            d3.select(".app span").html("<h1>修改SPAN内容~</h1>");
            d3.select("h1").attr("title", "title修改i展示");
            d3.select("h1").attr("style", "color: red");
            d3.select("h1").style("color", "blue");
            // 添加class类
            d3.select("h1").classed('test', true);
            d3.select("h1").classed('test1', true);
            // 删除class
            d3.select("h1").classed('test', false);
            // 检查是否存在类
            console.log(d3.select("h1").classed('test1'));
        }
        initSel();

        const initData = () => {
            const dom = d3.select('#list').selectAll('li');
            /**
             * enter（）方法提供对剩余数据的访问
             * append（）方法用于从相应数据创建新元素
             * 
             */
            dom.data([1, 2, 3, 4, 5, 6, 7]).text(text => (`li-${text}`))
                .enter()
                .append('li')
                .text(t => (`new li - ${t}`))
        }
        initData();

        const removeData = () => {
            /**
             * 删除除了【1，2，3】中的数据
             * 数据连接提供了另一种称为exit() method用于处理从数据集中动态删除的数据项
             * 
             */
            d3.selectAll('li')
                .data([1, 2, 3])
                .exit()
                .remove()
        }

        const initDatum = () => {
            /**
             * datum（）方法用于为HTML文档中的单个元素设置值
             * 
             */
            d3.select(".p1")
                .datum(50)
                .text((d) => {
                    return "datum " + d;
                });
            d3.select(".p2")
                .datum(100)
                .append("p")
                .text((d) => {
                    return "datum " + d;
                });
        }
        initDatum()

        const initSvg = () => {
            var width = 500;
            var height = 800;

            var svg = d3.select("#svg")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("style", 'margin-top: 20px;')
                .append("g")
                .attr('transform', 'translate(60,60) rotate(10)');
            svg.append("line")
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 300)
                .attr("y2", 100)
                .style("stroke", "rgb(255,0,0)")
                .style("stroke-width", 2);
            svg.append("line")
                .attr("x1", 0)
                .attr("y1", 100)
                .attr("x2", 300)
                .attr("y2", 0)
                .style("stroke", "rgb(255,0,0)")
                .style("stroke-width", 2);
            svg.append("line")
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 300)
                .attr("y2", 0)
                .style("stroke", "rgb(255,0,0)")
                .style("stroke-width", 5);
            svg.append("line")
                .attr("x1", 0)
                .attr("y1", 100)
                .attr("x2", 300)
                .attr("y2", 100)
                .style("stroke", "rgb(255,0,0)")
                .style("stroke-width", 2);
            svg.append("line")
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 0)
                .attr("y2", 100)
                .style("stroke", "rgb(255,0,0)")
                .style("stroke-width", 5);
            svg.append("line")
                .attr("x1", 300)
                .attr("y1", 0)
                .attr("x2", 300)
                .attr("y2", 100)
                .style("stroke", "rgb(255,0,0)")
                .style("stroke-width", 5);


            svg.append("rect")
                .attr('x', 50)
                .attr('y', 120)
                .attr('width', 200)
                .attr('height', 200)
                .attr('fill', 'green')

            svg.append("circle")
                .attr('cx', 150)
                .attr('cy', 390)
                .attr('r', 50)
                .attr('fill', 'red')

            svg.append("ellipse")
                .attr('cx', 150)
                .attr('cy', 510)
                .attr('rx', 90)
                .attr('ry', 50)
                .attr('fill', 'blue')

        }
        initSvg()

    </script>
</body>
<style>
    .test1 {
        padding: 20px;
        background: #000000;
    }
</style>

</html>